<template>
  <div class="myCaseTask">
    <div class="top">
      <el-form ref="form" :model="formLabelAlign" size="mini" label-width="80px">
        <div class="form_a">
          <!-- <el-form-item label="工单ID">
            <el-input style="width: 100px" v-model="formLabelAlign.caseId"></el-input>
          </el-form-item> -->
          <el-form-item label="会员手机">
            <el-input style="width: 140px" v-model="formLabelAlign.phone"></el-input>
          </el-form-item>
          <el-form-item label="操作时间">
            <el-date-picker v-model="formLabelAlign.operateTime" :value-format="format" size="mini" style="width: 140px"
              type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态">
            <el-select clearable v-model="formLabelAlign.state" @change="stateList" placeholder="请选择状态">
              <el-option label="待处理 " value="0"></el-option>
              <el-option label="处理完" value="1"></el-option>
              <el-option label="废弃" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="formLabelAlign.type" placeholder="请选择卡类型">
              <el-option label="发起" value="initiate"></el-option>
              <el-option label="接收" value="takeOver"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="会员卡号">
            <el-input style="width: 200px" v-model="formLabelAlign.cardCode"></el-input>
          </el-form-item> -->
        </div>
        <div class="form_b">
          <div class="invoice-1">
            <el-form-item label="创建时间">
              <el-date-picker v-model="formLabelAlign.startTime" :value-format="format" size="mini" style="width: 140px"
                type="date" placeholder="创建时间">
              </el-date-picker>
              <span class="invoice-9">至 </span>
              <el-date-picker v-model="formLabelAlign.endTime" :value-format="format" size="mini" style="width: 140px"
                type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </div>
          <el-form-item label="订单号">
            <el-input style="width: 200px" v-model="formLabelAlign.orderId"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="theQuery">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div>
      <div class="table">
        <el-table border size="mini" ref="multipleTable" :data="dataList" :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }" :row-style="{ height: '40px' }" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="caseId" label="工单" width="100">
          </el-table-column>
          <el-table-column prop="phone" label="会员手机" width="100">
          </el-table-column>
          <el-table-column prop="caseTypeId" label="工单类型" width="100">
            <template slot-scope="scope">
              <template v-for="(item, index) in workOrderType" v-if="scope.row.caseType == item.value">
                {{ item.label }}
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="caseTypeId" label="工单分类" width="144">
            <template slot-scope="scope">
              <template v-for="(item, index) in orderLedger" v-if="scope.row.caseTypeId == index">
                {{ item.caseTypeName }}
              </template>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="caseTypeId" label="工单类型ID" width="84">
            </el-table-column> -->
          <el-table-column prop="caseTitle" label="工单标题" width="124">
          </el-table-column>
          <el-table-column prop="caseContent" label="工单内容" width="150">
          </el-table-column>
          <el-table-column prop="employeeName" label="创建人" width="84">
          </el-table-column>
          <el-table-column prop="deptName" label="创建部门" width="124">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160">
          </el-table-column>
          <el-table-column prop="customerName" label="会员名称" width="104">
          </el-table-column>
          <el-table-column prop="jsDeptName" label="接收部门" width="124">
          </el-table-column>
          <!-- <el-table-column prop="jsPosition" label="接收岗位" width="124">
          </el-table-column> -->
          <el-table-column prop="jsPerson" label="接收人" width="104">
          </el-table-column>
          <el-table-column prop="orderId" label="订单号" width="160">
          </el-table-column>
          <el-table-column prop="pri" label="优先级" width="70">
            <!-- <template slot-scope="scope">
              <template v-if="scope.row.pri == '0'">普通</template>
              <template v-if="scope.row.pri == '1'">紧急</template>
            </template> -->
          </el-table-column>
          <!-- <el-table-column prop="pri" label="分类" width="70">
            <template slot-scope="type">
              <template v-if="scope.row.type == 'takeOver'">接收</template>
              <template v-if="scope.row.type == 'initiate'">发起</template>
            </template>
          </el-table-column> -->
          <el-table-column prop="caseStatus" label="状态" width="80">
            <!-- <template slot-scope="scope">
              <template v-if="scope.row.caseStatus == '0'">待处理</template>
              <template v-if="scope.row.caseStatus == '1'">处理完</template>
              <template v-if="scope.row.caseStatus == '2'">废弃</template>
            </template> -->
          </el-table-column>
          <el-table-column prop="operator" label="操作人" width="80">
          </el-table-column>
          <el-table-column prop="operateTime" label="最后操作时间" width="150">
          </el-table-column>
          <!-- <el-table-column prop="name" label="操作" width="90">
              <template slot-scope="scope">
              <el-button
              v-if="scope.row.caseType!=null"
                size="mini"
                type="primary"
                @click=" handleChange(scope.$index, scope.row)">操作
              </el-button>
              </template>
            </el-table-column> -->
          <el-table-column prop="name" label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" style="background-color: #6090ec; color: #fff"
                @click="getclaimById(scope.row,'0')">详情
              </el-button>
              <el-button size="mini" style="background-color: #6090ec; color: #fff"
                @click="getclaimById(scope.row,'1')">修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import cookie from "js-cookie";
  export default {
    name: "myCaseTask",
    data() {
      return {
        title: "工单详情",
        orderLedger: [],
        format: "yyyy-MM-dd",
        // 返回数据渲染列表
        dataList: [],
        // 卡类型
        type: "",
        // 状态
        state: "",
        // 分页
        total: 0,
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        form: {},
        workOrderType: [{
            value: "ordinary",
            label: "普通",
          },
          {
            value: "derelictionDuty",
            label: "渎失职",
          },
          {
            value: "claim",
            label: "理赔",
          },
          {
            value: "complaint",
            label: "投诉",
          },
        ],
        Therepairorder: [],
        // 搜索条件
        formLabelAlign: {
          caseId: "",
          operateTime: "",
          cardTypeId: "",
          cardCode: "",
          phone: "",
          type: "takeOver",
          orderId: "",
          // 时间范围

          startTime: new Date(new Date() - (3600 * 1000 * 24 * 7 + 1000))
            .toLocaleDateString()
            .replace(/\//g, "-"),
          endTime:new Date(new Date().getTime() +86400000).toLocaleDateString().replace(/\//g, "-"),
          //   startTime:"",
          // endTime: "",
        },
      };
    },
    methods: {
      // handleChange(row, index) {
      //   console.log(row, index);
      //   if (index.caseType == "投诉工单") {
      //     this.$router.push({
      //       name: "caseComplaintmodify",
      //       params: {
      //         caseId: index.caseId,
      //       },
      //     });
      //   }
      //   if (index.caseType == "理赔工单") {
      //     this.$router.push({
      //       name: "caseComplaintmodify",
      //       params: {
      //         caseId: index.caseId,
      //       },
      //     });
      //   }
      //   if (index.caseType == "渎失职工单") {
      //     this.$router.push({
      //       name: "caseComplaintmodify",
      //       params: {
      //         caseId: index.caseId,
      //       },
      //     });
      //   }
      //   if (index.caseType == null) {
      //     this.$message({
      //       message: "抱歉，暂无工单类型，无法进行操作",
      //       type: "warning",
      //     });
      //   }
      // },
      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getselectCaseMine();
        this.pageSize = value;
      },
      search() {
        localStorage.setItem("pageNum", this.currentPage);
        localStorage.setItem("pageSize", 10);
        this.getselectCaseMine();
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getselectCaseMine();
        // orders = res.data;
      },
      handleClose() {
        this.cancellog = false;
      },
      // 状态
      stateList(row) {
        this.state = row;
        console.log(this.state);
      },
      // 卡类型
      typeList(row) {
        this.type = row;
        console.log(this.type);
      },
      // 查询按钮
      theQuery() {
        localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.getselectCaseMine();
      },

      // 订单列表 查询条件
      getselectCaseMine() {
        localStorage.setItem("isToken", true);
        if (this.formLabelAlign.operateTime == null) {
          this.formLabelAlign.operateTime = "";
        }
        if (this.formLabelAlign.startTime == null) {
          this.formLabelAlign.startTime = "";
        }
        if (this.formLabelAlign.endTime == null) {
          this.formLabelAlign.endTime = "";
        }
        this.$axios
          .getselectCaseMine({
            caseId: this.formLabelAlign.caseId,
            operateTime: this.formLabelAlign.operateTime,
            // 状态
            caseStatus: this.state,
            cardTypeId: this.type,
            cardCode: this.formLabelAlign.cardCode,
            phone: this.formLabelAlign.phone,
            startTime: this.formLabelAlign.startTime,
            endTime: this.formLabelAlign.endTime,
            orderId: this.formLabelAlign.orderId,
            type: this.formLabelAlign.type,
            // caseId:"",
            // operateTime:"",
            // caseStatus:"",
            // cardTypeId:"",
            // cardCode:"",
            // phone:"",
            // startTime:"",
            // endTime:"",
            // orderId:""
          })
          .then((res) => {
            
            console.log(res);
            if (res.code == "200") {
              this.total = res.total;
              console.log(this.total);
              this.dataList = res.data;
              console.log(this.dataList);
              if (res.data[0].msg == "登录已过期") {
                cookie.remove("Xd_Token");
                this.$message({
                  message: "登录已过期，请重新登录",
                  type: "warning",
                });
                this.$router.go(0)

              }
            }
          });
      },

      // 工单分类列表
      getlists() {
        this.$axios.getlists({}).then((res) => {
          if (res.code == "200") {
            console.log(res);
            this.orderLedger = res.data;
          }
        });
      },

      // 详情点击事件
      getclaimById(row, val) {
        console.log(row);

        if (row.caseType == "claim") {
          let arr = {
            caseClaimId: row.caseClaimId
          }
          this.$router.push({
            name: "caseClaim",
            query: {
              row: arr,
              val: val
            },
          });
        } else if (row.caseType == "derelictionDuty") {
          let arr = {
            caseMalfeasanceId: row.caseMalfeasanceId
          }
          this.$router.push({
            name: "caseMalfeasance",
            query: {
              row: arr,
              val: val
            },
          });
        } else if (row.caseType == "complaint") {
          this.$router.push({
            name: "caseComplaintmodify",
            params: {
              caseComplaintId: row.caseComplaintId,
            },
          });
        } else if (row.caseType == 'ordinary') {
          this.$router.push({
            name: "caseSystem",
            params: {
              row: {
                caseId: row.caseId,
              }
            },
          });
        }

        // this.$axios
        //   .getclaimById({
        //     claimId: row.caseId,
        //   })
        //   .then((res) => {
        //     if (res.code == 200) {
        //       console.log(res);

        //     }
        //   });
      },
    },
    mounted() {
      this.getselectCaseMine();
      this.getlists();
    },
  };
</script>

<style scoped>
  .top {
    margin: 20px;
  }

  .form_a {
    display: flex;
  }

  .form_b {
    display: flex;
  }

  .table {
    margin: 20px;
  }
</style>